body {
    background: #f2f2f2;
    font-family: 'Hiragino Sans GB', "Microsoft Yahei", "微软雅黑", sans-serif;
}

main {
    padding: 10px;
}

main .lin-canvas-container {
    float: left;
    min-width: 400px;
}

main .lin-code-container {
    float: left;
    min-width: 400px;
}

main .lin-button-block {
    width: 100%;
}

#id-canvas {
    background: #fff;
}

body {
    font: 14px 'PingFang SC', Helvetica, sans-serif, Raleway, HNL, 'Noto Sans CJK TC', 'Microsoft JhengHei';
}

a {
    cursor: pointer;
    color: #d70f3f;
    text-decoration: none;
}

.sidebar li {
    margin: 10px 0;
}

.sidebar a .time {
    display: block;
    color: #777;
    margin: 2px 0;
}

.sidebar a .title {
    display: block;
    color: #0078e7;
    line-height: 1.4;
}

.kuai-right {
    float: right;
}

a.kuai-active {
    background: red;
}

body {
    padding-top: 62px;
}

nav#id-nav {
    /* background: rgba(203, 27, 69, .98); */
    /* background-color: #96b97d; */
    background-color: #fff;

    position: fixed;
    z-index: 10;
    top: 0;
    width: 100%;
    opacity: 1;
}

a.kuai-nav-link {
    height: inherit;
    float: left;
    display: inline-block;
    /* color: #fff; */
    color: #000;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    cursor: pointer;
    box-sizing: border-box;
    border-radius: 1px;
}

a.kuai-nav-image {
    padding: 5px 20px 5px 20px;
    height: inherit;
    cursor: pointer;
}

a.kuai-nav-image:hover,
a.kuai-nav-link:hover {
    /* background-color: #b4183d; */
    /* background-color: #96b97d; */
    background-color: #bbe2a1;

}

.kuai-nav-item {
    margin: 0;
    padding: 5px 0;
    display: inline-block;
}

.kuai-nav-item:hover {
    background: #95dada;
}

.kuai-nav-item>a {
    text-decoration: none;
    color: #2f4f4f;
}

.kuai-nav-item.active>a {
    background: #cb1b45;
    color: #efd7d7;
}

.kuai-nav-item>a:hover {
    background: #2f4f4f;
    color: #fff;
}

.kuai-block {
    overflow: hidden;
    padding: 5px;
}

.kuai-block:hover {
    background: #95dada;
}

.kuai-activity {
    border-bottom: 1px dashed #d3d3d3;
}

.kuai-activity>div {
    margin-left: 60px;
    margin-top: 10px;
    margin-bottom: 5px;
}

.kuai-activity>.kuai-title {
    position: relative;
}

a.kuai-topic-link {
    text-decoration: none;
}

.kuai-topic-title {
    padding-right: 42px;
    color: #2f4f4f;
    font-size: 20px;
}

.kuai-topic-time {
    font-size: 13px;
    color: #778899;
}

.kuai-topic-views {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 13px;
    border-radius: 5px;
    background: #ff8c00;
    padding: 4px;
    color: #fff;
}

.kuai-activity>img.kuai-avatar {
    float: left;
    background-color: none;

}

.kuai-left {
    width: 200px;
    position: fixed;
}

.kuai-center {
    margin-left: 200px;
}

.kuai-button-toggle-update {
    float: right;
    margin-left: 10px;
}

.kuai-button-delete {
    float: right;
    margin-left: 10px;
}

.kuai-button-submit {
    float: right;
    margin-left: 10px;
}

.kuai-button-cancel {
    float: right;
    margin-left: 10px;
}

input,
textarea {
    box-sizing: border-box;
}

.kuai-full {
    width: 100%;
}

.kuai-content {
    margin-top: .5%;
    margin-bottom: .5%;
    font-size: 14px;
}

textarea.kuai-content {
    height: 200px;
}

.markdown-body {
    max-width: 980px;
    font-size: 14px !important;
}

.markdown-body pre {
    background-color: transparent !important;
    font-size: 100% !important;
}

.pure-u-1-4.kuai-left.kuai-nav {
    position: static;
    width: 100%;
    padding: 10px 0;
    background: #fbf9f2;
}

.pure-u-1-4.kuai-left.kuai-nav h2 a {
    display: inline-block;
    font-size: 14px;
    margin: 0 5px;
    border-radius: 4px;
    padding: 4px 5px;
}

.pure-u-1-4.kuai-left.kuai-nav h2 .active {
    background: #f0ead1;
}

.pure-u-1-4.kuai-left.kuai-nav h2 .active:hover {
    color: #998f66;
}

.pure-u-3-4.kuai-center {
    width: 100%;
}

.kuai-center {
    margin: 0;
}

.main {
    width: 90%;
    max-width: 1400px;
    min-width: 960px;
    margin: 15px auto;
    min-height: 100vh;
    overflow: hidden;
}

.sidebar {
    width: 290px;
    font-size: 14px;
    float: right;
    margin-bottom: 20px;
}

.sidebar div {
    background: #fbf9f2;
    margin-left: 10px;
    margin-bottom: 10px;
    height: 300px;
}

#id-button-toggle-update {
    color: #add8e6;
    background: pink;
}

.kuai-block>div,
.kuai-topic-time {
    color: #998f66;
}

.markdown-body>p {
    color: #000;
}

.kuai-avatar {
    display: inline-block;
    box-sizing: content-box;
    color: #fff;
    text-align: center;
    vertical-align: top;
    background-color: #f6f3e4;
    font-weight: 400;
    width: 48px;
    height: 48px;
    border-radius: 48px;
    font-size: 24px;
    line-height: 48px;
}

.kuai-block:hover,
.kuai-nav-item:hover {
    background: 0 0;
}

.kuai-nav-item>a {
    display: block;
    color: #998f66;
}

a.kuai-nav-image {
    height: 55px;
    padding: 5px 20px 0 20px;
    overflow: hidden;
}

.kuai-block.kuai-activity:hover {
    background: #fbf9f2;
}

#button-run,
#id-button-login,
#id-button-submit,
#id-button-toggle,
#id-button-toggle-comment,
#id-button-toggle-update {
    color: #fff;
    background: #cb1b45;
    font-weight: 700;
}

#button-run:hover,
#id-button-submit:hover,
#id-button-toggle-comment:hover,
#id-button-toggle-update:hover,
#id-button-toggle:hover {
    background-color: #b4183d;
}

#id-button-toggle-answer {
    color: #fff;
    background: #cb1b45;
    font-weight: 700;
}

#id-button-modsignature,
.kuai-content,
.kuai-full,
.kuai-full.kuai-content.pure-input-1,
.kuai-submit,
.pure-form input[type=submit] {
    outline: 0;
}

.markdown-body a {
    margin-top: 8px;
    margin-right: 20px;
    white-space: normal;
    font-size: 12px;
    line-height: 1.5em;
    color: #d70f3f;
}

.kuai-topic-views {
    top: 10px;
    font-size: 85%;
    font-weight: 600;
    display: inline-block;
    padding: .1em .5em;
    border-radius: 4px;
    text-transform: none;
    color: #fff;
    background-color: #e7672e;
}

#id-button-modsignature,
.kuai-submit,
.pure-form input[type=submit] {
    display: inline-block;
    margin-bottom: 0;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    white-space: nowrap;
    line-height: 20px;
    padding: 6px 12px;
    border-radius: 4px;
    user-select: none;
    color: #998f66;
    background: #f6f3e4;
    border: 0;
}

#id-button-modsignature:hover,
.kuai-submit:hover,
.pure-form input[type=submit]:hover {
    background-color: #f0ead1;
}

#id-button-modsignature,
.kuai-full.kuai-content,
.pure-form input[type=submit],
textarea.kuai-content {
    padding-left: 10px;
}

#id-input-signature:focus,
.kuai-full.kuai-content.pure-input-1:focus,
.kuai-full.kuai-content:focus,
textarea.kuai-content:focus {
    outline: #cb1b45 2px solid;
}

.kuai-title {
    border: none;
    font-size: 20px;
}

.kuai-title:hover {
    background: #fbf9f2;
}

a.kuai-active {
    background: #96b97d;
}

#id-button-login {
    color: #fff;
    background: #cb1b45;
    font-weight: 700;
    cursor: pointer;
}

#id-button-login:hover {
    background-color: #b4183d;
}

h1.kuai-title {
    color: #000;
}

.kuai-title:hover {
    background: 0 0;
}

.kuai-tab {
    margin-top: 0;
}

.kuai-tab a {
    color: #998f66;
}

.kuai-tab .active {
    color: #d70f3f;
}

.kuai-tab .kuai-block {
    background: #d70f3f;
}

div#id-form-question .text {
    margin-top: 0;
    margin-bottom: 30px;
}

div#id-form-question .text p {
    color: #000;
    margin: 0;
}

div.text {
    padding: 2px 10px;
    border: 1px solid #999;
}

.topic-stamp {
    display: inline-block;
    padding: 0 5px;
    font-size: 12px;
    color: #fff;
    vertical-align: middle;
    background: #ff8c00;
    border-radius: 5px;
}

.footer {
    box-sizing: border-box;
    height: 51px;
    padding-top: 20px;
    text-align: center;
    background: #cc3249;
}

.footer a {
    color: #eee;
}

.footer a:hover {
    color: #fff;
    text-decoration: underline;
}

.uploader {
    height: 100px;
    text-align: center;
    line-height: 100px;
    border-radius: 5px;
    border: 2px solid rgba(0, 0, 0, .3);
    margin: 10px;
}

.ul-latest-topic {
    list-style-type: none;
}